<template>
    <view v-if="pageLoad">
        <view class="pa-16">
            <view class="header-card">
                <view v-if="userInfo.expired" class="text-bold">当前有效期</view>
                <view class="text-20">{{ userInfo.expired ? userInfo.expired : '成为会员享受权益' }}</view>
            </view>
            <view class="mt-16 mb-8 text-15">请选择充值套餐</view>
            <view class="menu-list">
                <view class="menu-item" :class="{ active: currentRight.rightsId == item.rightsId }" v-for="item in rightList" @click="currentRight = item">
                    <view class="text-18 pb-8">{{ item.rightsName }}</view>
                    <view class="gray8 text-14">¥{{ item.rightsPrice }}</view>
                </view>
            </view>
            <view class="py-16 gray9">
                <view class="pb-5">1. 充值成功后无法退款，不可提现，请谨慎</view>
                <view class="pb-5">2. 若遇到其他充值问题，请进入我的页面点击“意见反馈”</view>
                <view class="pb-5">3. 若充值后权益时长没有增加，请完全退小程序后重新进入</view>
            </view>
        </view>
        <sticky-bottom-bar :height="240">
            <view class="text-15 mt-2 mb-12">
                <checkbox-group @change="checkboxChange">
                    <label class="flex align-center">
                        <checkbox style="transform: scale(0.75)" :color="style.primary" value="true" :checked="checkAgreement" />
                        <view>我已阅读并同意<text class="primary" @click.stop="showAgreement">《支付协议》</text> </view>
                    </label>
                </checkbox-group>
            </view>
            <my-button shape="circle" :disabled="payLoading || !checkAgreement" :loading="payLoading" @click="submit">立即支付 {{ currentRight.rightsPrice }} 元</my-button>
        </sticky-bottom-bar>
        <uni-popup background-color="#fff" type="bottom" borderRadius="36rpx 36rpx 0 0 " ref="popupRef">
            <view class="text-16 text-bold text-center my-10">{{ config.targetLangZh }}语翻译Pro付费会员服务协议 </view>
            <scroll-view style="height: 75vh" scroll-y="true">
                <pay-agreement></pay-agreement>
            </scroll-view>
            <my-button @click="agreenNext">同意并继续</my-button>
        </uni-popup>
    </view>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { toast, isEmpty } from '@/assets/js/utils';
import { getPayParam, getRightsList } from '@/api/order';
import { getUserInfo } from '@/api/login';
import style from '../../assets/css/variables.module.scss';
import { config } from '@/assets/js/config';

const pageLoad = ref(false);
onLoad(options => {
    if (options && !isEmpty(options.flag)) {
        pageLoad.value = true;
        handleGetUserInfo();
        handleGetRightsList();
    }
});

//获取当前用户信息
const userInfo: any = ref([]);
const handleGetUserInfo = async () => {
    let [result, err] = await getUserInfo();
    if (result) {
        userInfo.value = result;
    }
};
//套餐相关
const rightList: any = ref([]);
//获取支付套餐列表
const handleGetRightsList = async () => {
    let [result, err] = await getRightsList();
    if (result && Array.isArray(result)) {
        rightList.value = result;
        currentRight.value = rightList.value[0];
    }
}
const currentRight = ref();

//支付相关
const payLoading = ref(false);
const submit = async () => {
    uni.showLoading({
        title: '支付中',
        mask: true
    });
    // 374403834950238209
    let [result, err] = await getPayParam({ rightsId: currentRight.value.rightsId });
    if (result && result.payJsapiDTO) {
        // #ifdef MP-WEIXIN
        wx.requestPayment({
            timeStamp: result.payJsapiDTO.timeStamp,
            nonceStr: result.payJsapiDTO.nonceStr,
            package: result.payJsapiDTO.packageExt,
            signType: result.payJsapiDTO.signType,
            paySign: result.payJsapiDTO.paySign,
            success(res: any) {
                toast('支付成功');
                handleGetUserInfo();
            },
            fail(err: any) {
                uni.hideLoading();
                console.log(err);
            }
        });
        // #endif
        // #ifndef MP-WEIXIN
        toast('暂不支持当前平台支付');
        // #endif
    }
};

// 协议相关
const checkAgreement = ref(false);
//弹窗实例
const popupRef: any = ref(null);
const checkboxChange = (e: any) => {
    if (e.detail.value.length === 1) {
        checkAgreement.value = true;
    } else {
        checkAgreement.value = false;
    }
    console.log(e);
};
const showAgreement = () => {
    popupRef.value.open();
};
const agreenNext = () => {
    checkAgreement.value = true;
    popupRef.value.close();
};
</script>

<style lang="scss" scoped>
.header-card {
    display: flex;
    flex-direction: column;
    padding: 32rpx;
    border-radius: 16rpx;
    color: #fff;
    gap: 16rpx;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), linear-gradient(135deg, #00a8d9 0%, #e6f7f7 100%);
}
.menu-list {
    display: flex;
    flex-wrap: wrap;
    row-gap: 16rpx;
    column-gap: 32rpx;
    .menu-item {
        width: calc(50% - 18rpx);
        padding: 32rpx 32rpx;
        border-radius: 16rpx;
        background: #ffffff;
        box-sizing: border-box;
        border: 4rpx solid #e5e7eb;
    }
    .active {
        color: $primary;
        border: 4rpx solid $primary;
    }
}
</style>
